<template>
  <div>
    <div class="top">
      <div class="sp-left">
        <img :src="baseUrl + detail.avatar" alt />
      </div>
      <div class="sp-right">
        <h4>{{detail.title}}</h4>
        <span>专家：{{detail.name}}</span>
        <p>￥{{detail.price}}</p>
      </div>
      <div class="ss"></div>
      <div class="fu">
        <h4>支付方式</h4>
        <div class="wei">
          <img src="../assets/img/wechat.png" alt />
          <p>微信支付</p>
          <img src="../assets/img/yes.png" alt />
        </div>
      </div>
      <div class="ss"></div>
      <div class="fleet">
        <div class="fleet-top">
          <p>微信支付</p>
          <span>无优惠券可用</span>
        </div>
        <div class="fleet-bottom">
          <p>支付金额</p>
          <span>¥{{detail.price}}元</span>
        </div>
      </div>
    </div>
    <van-button class="btn" type="info" @click="submit">立即支付</van-button>
  </div>
</template>
<script>
import { wxShare } from "@/mixin/share";
export default {
  name: "lgou",
  props: ["id"],
  data() {
    return {
      checked: true,
      detail: {},
      baseUrl: process.env.VUE_APP_BASEURL
    };
  },
  mixins: [wxShare],
  methods: {
    async submit() {
      console.log(location, this.$route);
      let res = await this.$http(`api/my/pay_order`, {
        params: {
          course_id: this.detail.id,
          amount: this.detail.price,
          returnurl: `${location.href.split("#")[0]}#/kecheng/${this.id}`
        }
      });
      if (res.code == 101) {
        this.$router.push({
          name: "userCenter",
          query: { buyid: this.$route.params.id }
        });
      }
      let data = JSON.parse(res.data);
      let _this = this;
      WeixinJSBridge.invoke("getBrandWCPayRequest", data, function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (_this.detail.media_type == 2) {
            _this.$router.push({ path: `/kechengy/${this.id}` });
          } else {
            _this.$router.push({ path: `/kecheng/${this.id}` });
          }
        }
      });
    }
  },
  async mounted() {
    let res = await this.$http.post(`api/index/video_introduce`, {
      course_id: this.id
    });
    this.detail = res.data;
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.van-nav-bar {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
.van-nav-bar__left .van-nav-bar__text {
  color: black;
  font-size: 3rem;
}
.van-nav-bar__title {
  max-width: 70%;
  margin-left: 50px;
}
.van-icon,
.van-icon::before {
  font-size: 20px;
  color: black;
}
.van-icon-arrow:before {
  font-size: 1.5rem;
  color: rgba(210, 210, 210, 1);
}
.van-cell {
  padding: 20px 16px;
}
.van-cell__left-icon {
  font-size: 0.5rem;
}
.van-cell__title {
  font-family: PingFang SC;
  font-size: 1rem;
}
.top {
  height: 118.5px;
  position: relative;
}
.sp-left {
  width: 120px;
  height: 84px;
  margin: 14.5px 0 20px 15.5px;
  border-radius: 5px;
}
.sp-left img {
  width: 100%;
  height: 100%;
}
.sp-right {
  padding-right: 21.5px;
}
.sp-right h4 {
  width: 208px;
  height: 32.5px;
  font-size: 15px;
  color: #333333;
  font-weight: 500;
  position: absolute;
  top: 1px;
  left: 160.5px;
}
.sp-right span {
  font-size: 12px;
  color: #606165;
  font-weight: 400;
  position: absolute;
  top: 45px;
  left: 160.5px;
}
.sp-right p {
  font-size: 12px;
  color: #fa2f19;
  font-weight: 400;
  position: absolute;
  top: 66px;
  left: 160.5px;
}
.ss {
  height: 10.5px;
  background: #f5f7fc;
}
.fu {
  height: 94.5px;
}
.fu h4 {
  height: 49.5px;
  line-height: 49.5px;
  border-bottom: 1px solid #d2d2d2;
  padding-left: 15.5px;
  font-size: 18px;
  color: #333333;
  font-weight: 500;
}
.wei {
  height: 49.5px;
  line-height: 49.5px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wei img {
  width: 20px;
  height: 20px;
}
.wei p {
  font-size: 15px;
  color: #333333;
  font-weight: 400;
  flex: 1;
  margin-left: 10px;
}
.wei .van-checkbox {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 15px;
  right: 15px;
}
.fleet {
  height: 426px;
}
.fleet-top {
  height: 43px;
  border-bottom: 1px solid #d2d2d2;
}
.fleet-top p {
  font-size: 15px;
  color: #333333;
  padding-left: 16px;
  line-height: 43px;
  float: left;
}
.fleet-top span {
  font-size: 12px;
  color: #999999;
  padding-right: 11.5px;
  line-height: 43px;
  float: right;
}
.fleet-bottom {
  height: 44px;
  border-bottom: 1px solid #d2d2d2;
}
.fleet-bottom p {
  font-size: 15px;
  color: #333333;
  padding-left: 14.5px;
  line-height: 44px;
  float: left;
}
.fleet-bottom span {
  font-size: 12px;
  color: #fa2f19;
  padding-right: 15px;
  line-height: 44px;
  float: right;
}
.van-button--large {
  width: 100%;
  height: 43px;
}
.van-button--danger {
  background: #0e1dfe;
  border: 1px solid #2b42ff;
  line-height: 43px;
}
.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 18px;
}
</style>